import { useState, lazy, Suspense } from "react";
import { Routes, Route, useNavigate, NavLink } from "react-router-dom";
import style from "./App.module.scss";

let Home = lazy(() => import("./pages/home/Home"));
let BookList = lazy(() => import("./pages/bookList/BookList"));
let Story = lazy(() => import("./pages/story/Story"));
let Mine = lazy(() => import("./pages/mine/Mine"));
let BookDetails = lazy(() => import("./pages/bookDetails/BookDetails"));
let BookPageDetails = lazy(() => import("./pages/bookPageDetails/BookPageDetails"));
let AllType = lazy(() => import("./pages/alltype/AllType"));
let TypeBookList = lazy(() => import("./pages/typeBookList/TypeBookList"));

let list = ["找绘本", "找书单", "听故事", "我"];
let navigate = ["", "/booklist", "/story", "/mine"];
let icon = ["icon-line-newspaperbaozhi", "icon-youhuiquan", "icon-24gf-headset", "icon-wode"];
let App: React.FC = () => {
  return (
    <>
      {/* 导航栏 */}
      <div className={style.box}>
        {navigate.map((item, index) => (
          <NavLink key={item} to={navigate[index]}>
            <i className={"iconfont " + icon[index]}></i>
            {list[index]}
          </NavLink>
        ))}
      </div>

      {/* 路由 */}
      <Routes>
        <Route
          path="/"
          element={
            <Suspense fallback={<>loding</>}>
              <Home />
            </Suspense>
          }
        />
        <Route
          path="/booklist"
          element={
            <Suspense fallback={<>loding</>}>
              <BookList />
            </Suspense>
          }
        />
        <Route
          path="/story"
          element={
            <Suspense fallback={<>loding</>}>
              <Story />
            </Suspense>
          }
        />
        <Route
          path="/mine"
          element={
            <Suspense fallback={<>loding</>}>
              <Mine />
            </Suspense>
          }
        />
        <Route
          path="/bookdetails/:id"
          element={
            <Suspense fallback={<>loding</>}>
              <BookDetails />
            </Suspense>
          }
        />
        <Route
          path="/bookpagedetails/:id"
          element={
            <Suspense fallback={<>loding</>}>
              <BookPageDetails />
            </Suspense>
          }
        />
        <Route
          path="/alltype"
          element={
            <Suspense fallback={<>loding</>}>
              <AllType />
            </Suspense>
          }
        />
        <Route
          path="/typebooklist/:id/:type"
          element={
            <Suspense fallback={<>loding</>}>
              <TypeBookList />
            </Suspense>
          }
        />
      </Routes>
      <div className={style.bottom}></div>
    </>
  );
};
export default App;
